/* eslint-disable indent */
import createComponent from 'cxs-components';

export default createComponent('div')(({ aStyle, dStyle, isSelected }) => {
  const { titleFontCode, contentFontCode } = dStyle;
  const { rowActiveBg, titleFontCode: at, contentFontCode: ac, bgImg } = aStyle;
  const first = isSelected ? at : titleFontCode;
  const last = isSelected ? ac : contentFontCode;
  const hoverImg = bgImg
    ? {
        backgroundImage: `url(${bgImg})`,
        backgroundSize: 'contain',
        backgroundPositionY: '2px',
      }
    : {};
  return {
    ' :first-child': {
      ...first,
    },
    ' :last-child': {
      ...last,
    },
    backgroundColor: isSelected ? rowActiveBg : 'transparent',
    ':hover': {
      ...hoverImg,
      backgroundColor: rowActiveBg,
      ' :first-child': {
        ...at,
      },
      ' :last-child': {
        ...ac,
      },
    },
  };
});
